import React, { useEffect, useState } from 'react'
import axios from 'axios';
import {  useLocation } from 'react-router-dom';
//接口地址: http://api.xiaohigh.com/heros/35
export default function HeroDetail() {
  //声明状态
  let [hero, setHero] = useState({});
  //声明变量
  // let id = 99;
  // let {id} = useParams()
  // let [query]=useSearchParams()
  // let id =query.get('id')
  // console.log(id);
  let res=useLocation()
  let id=res.state.id
  //发送 AJAX 请求
  useEffect(() => {
    let getData = async () => {
      //发请求
      let result = await axios.get(`http://api.xiaohigh.com/heros/${id}`);
      //更新状态
      setHero(result.data);
    }
    getData();
  },[])
  return (
    <div className="container" style={{padding: 20}}>
      {/* 左侧 */}
      <div className="left col-xs-3" style={{background: '#eee'}}>
        <h2>{hero.name}</h2>
        <p>{hero.type}</p>
        <div className="row">
          {
            hero.skills && hero.skills.map(item => {
              return <div className="col-xs-3" key={item.name}>
                      <img className='img-responsive' src={"http://cdn.xiaohigh.com" + item.img} alt="" />
                      <p>{item.name}</p>
                    </div>
            })
          }
        </div>
      </div>
      {/* 右侧 */}
      <div className="right col-xs-9">
        <img style={{borderRadius: 0}} className='img-responsive' src={hero.big_imgage?"http://cdn.xiaohigh.com" + hero.big_image:''} alt="" />
        <hr />
        {/* dangerouslySetInnerHTML  dangerous 危险的 set 设置 innerHTML 内部文本 */}
        <p dangerouslySetInnerHTML={{__html: hero.intro}}>
        </p>
      </div>
    </div>
  )
}
